<script setup>
import { gerSubCategoryAPI, getCategoryFilterAPI } from "@/apis/category";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { ref } from "vue";
import GoodsItem from "../Home/components/GoodsItem.vue";
const subCategoryList = ref({});
const goodList = ref([])
const route = useRoute();
const categoryFilter = ref({});
const disabled = ref(false)
const getCategoryFilter = async () => {
  const res = await getCategoryFilterAPI(route.params.id);
  categoryFilter.value = res.result;
};
const data = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  softField: "publishTime",
});
const gerSubCategoryList = async () => {
  const res = await gerSubCategoryAPI(data.value);
  subCategoryList.value = res.result;
  console.log(subCategoryList.value);
  goodList.value = subCategoryList.value.items
};
onMounted(() => {
  getCategoryFilter();
  gerSubCategoryList();
});
//tab改变回调函数
const tabChange = async () => {
  data.value.page = 1;
  const res = await gerSubCategoryAPI(data.value);
  subCategoryList.value = res.result;
};
//无限滚动函数
const load = async () => {
  data.value.page++;
  const res = await gerSubCategoryAPI(data.value);
  goodList.value = [...goodList.value,...res.result.items]
  if(res.result.items.length === 0)disabled.value = true
};
</script>

<template>
  <div
    class="categoryContainer"
    style="width: 100%; display: flex; justify-content: center; flex-wrap: wrap"
  >
    <div style="width: 1240px">
      <div class="topCategory" style="width: 100%; height: 40px">
        <div
          class="breadContainer"
          style="height: 100%; display: flex; align-items: center"
        >
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: `/category/${categoryFilter.parentId}` }"
            >
              {{ categoryFilter.parentName }}
            </el-breadcrumb-item>
            <el-breadcrumb-item> {{ categoryFilter.name }} </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div
        class="subContainer"
        style="
          width: 100%;
          background-color: white;
          padding: 10px 5px 10px 5px;
          margin-top: 8px;
        "
      >
        <el-tabs v-model="data.softField" @tab-change="tabChange()">
          <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
          <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
          <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
        </el-tabs>
        <div
          class="subMain"
          style="width: 100%; display: flex; flex-wrap: wrap"
          v-infinite-scroll="load"
          :infinite-scroll-disabled="disabled"
        >
          <div
            v-for="item in goodList"
            :key="item.id"
            class="subItem"
            style="width: 20%; padding: 20px 20px 20px 20px"
          >
            <GoodsItem :goods="item"></GoodsItem>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
</style>